<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0, maximum-scale=1, user-scalable=no" charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/app/css/media.css"/>
    <link rel="stylesheet" type="text/css" href="/app/css/common.css"/>

    <title>专属云</title>
    <link href="/app/css/mui.picker.css" rel="stylesheet" />
    <link href="/app/css/mui.poppicker.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/app/css/index.css"/>
    <script src="//do.yunzhijia.com/pub/js/qingjs.js"></script>
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/bootstrap-slider/9.4.1/css/bootstrap-slider.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/app/css/index.css"/>
    <script src="/app/js/jquery-3.0.0.min.js"></script>
    <script src="/layer/layer.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script>

</head>
<body style="background: #eaeff3";>
<div class="main_div">
<div class="main_body" style=" height: 1350px;">
    <input type="hidden" name="openId" id="openId" value="${openId}">
    <p class="topTip_p">专属云产品有计算独享与存储独享两种套餐，请按需查询，客户经理折扣为6折。</p>
    <div class="listing">
        <div class="items">
            <div class="item">
                <div class="iconDiv"><i>
                    <img src="/app/image/zhuanshuyun.png" width="20px"; height="15px">
                </i></div>
                <h4 class="title">计算独享</h4>
                <ul class="config_ul">
                    <span class="config_ul_title">计算单元</span>
                    <li id='showGuiGePicker'>
                        <span class="left" id="guiGe">规格1</span>
                        <div class ="right_Div"  >
                            <span class="left one one_style" id='userResult'>36C/321GB </span>                <i class="_icon_zsy left" >
                            <img src="/app/image/go_right.png">
                        </i>
                        </div>

                    </li>
                </ul>
                <ul class="config2_ul" id="list">
                    <span class="config_ul_title">存储单元</span>
                    <li>
                        <div class="_config_div left add" id="showstoragePickerLeft">
                            <span class="left" id="storageResultLeft">SATA基础包</span>
                            <i class="right"><img src="/app/image/go_right.png" ></i>
                        </div>

                        <div class="_config_div left add right" id="showstoragePickerRight">
                            <span class="left" id="storageResultRight">1000GB</span>
                            <i class="right"><img src="/app/image/go_right.png" ></i>
                        </div>
                    </li>
                </ul>


                <ul class="config2_ul" id="list_brand_one">
                    <span class="config_ul_title">带宽</span>
                    <li>
                        <div class=" left huahua" style="width: 46%;">
                            <!--滚动条框-->
                            <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="300" data-slider-step="10" data-slider-value="0" value="0"/>
                        </div>
                        <div class="_config_div wid35 left zhuiRou net_kd">
                            <div class="stat_minus minus1"><i><img src="/app/image/Group_MINUS.png"></i>
                            </div>
                            <input type="tel" pattern="[0-9]*" maxlength="4" id="statnumone" class="stat_num input_bg1 zhou brand_slider_num_one" value="0">
                            <div class="stat_plus plus1"><i><img src="/app/image/Group_PLUS.png"></i></div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="summary_div">
                <ul class="configInfo_ul left">
                    <li><span id = "guige_type_one_name">SATA基础包</span>
                        <span id = "guige_type_one_count">1000GB</span>
                    </li>
                    <li><span id="guige_count_one" value="1">36C/321GB </span></li>
                    <li>带宽<span id = "guige_band_one" value="1">0</span>M</li>
                </ul>
                <p class="price_p_zsy right " id="cpu_price">16300.00</p>
            </div>
        </div>
        <div class="items">
            <div class="item">
                <div class="iconDiv"><i>
                    <img src="/app/image/zhuanshuyun.png" width="20px"; height="15px">
                </i></div>
                <h4 class="title">计算存储独享</h4>
                <ul class="config_ul">
                    <span class="config_ul_title">计算单元</span>
                    <li id="showGuiGePicker2">
                        <span class="left" id="Guige_T">规格1</span>
                        <div class ="right_Div">
                            <span class="left one one_style" id='userResult2'>36C/321GB </span>                <i class="_icon_zsy left" >
                            <img src="/app/image/go_right.png">
                        </i>
                        </div>

                    </li>
                </ul>
                <ul class="config2_ul" id="list">
                    <span class="config_ul_title">存储单元</span>
                    <li>
                        <div class="_config_div left add" id="showstoragePickerLeft_two">
                            <span class="left" id="storageResultLeft_two">SATA基础包</span>
                            <i class="right"><img src="/app/image/go_right.png" ></i>
                        </div>
                        <div class="_config_div left add right" id="showstoragePickerRight_two">
                            <span class="left" id="storageResultRight_two">14.3TB</span>
                            <i class="right"><img src="/app/image/go_right.png" ></i>
                        </div>
                    </li>
                </ul>
                <ul class="config2_ul" id="list_brand_two">
                    <span class="config_ul_title">带宽</span>
                    <li>
                        <div class=" left huahua" style="width: 46%;">
                            <!--滚动条框-->
                            <input id="ex2" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="300" data-slider-step="10" data-slider-value="0" value="0"/>
                        </div>
                        <div class="_config_div wid35 left zhuiRou net_kd">
                            <div class="stat_minus minus1"><i><img src="/app/image/Group_MINUS.png"></i>
                            </div>
                            <input type="tel" pattern="[0-9]*" maxlength="4" id="statnumtwo" class="stat_num input_bg1 zhou  brand_slider_num_two" value="0">
                            <div class="stat_plus plus1"><i><img src="/app/image/Group_PLUS.png"></i></div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="summary_div">
                <ul class="configInfo_ul left">
                    <li><span id = "guige_type_two_name">SATA基础包</span>
                        <span id = "guige_type_two_count">1000GB</span>
                    </li>
                    <li><span id="guige_count_two">36C/321GB </span></li>
                    <li>带宽<span id = "guige_band_two">0</span>M</li>
                </ul>
                <p class="price_p_zsy right " id="cpu_price_two">￥53</p>
            </div>
        </div>
    </div>
</div>
<#include "foot.ftl">

<input type="hidden" id="total_guige_one" name="total_guige_one" value="16000">
<input type="hidden" id="total_stat_one" name="total_stat_one" value="0">
<input type="hidden" id="total_brand_one" name="total_brand_one" value="0">


<#--//存储-->
<input type="hidden" id="total_guige_two" name="total_guige_two" value="16000">
<input type="hidden" id="total_stat_two" name="total_stat_two" value="35000">
<input type="hidden" id="total_brand_two" name="total_brand_two" value="0">

<#--//带宽-->
<input type="hidden" id="total_brand_t" name="total_brand_t" value="0">
<input type="hidden" id="total_brand_a" name="total_brand_a" value="0">
<input type="hidden" id="total_brand_d" name="total_brand_d" value="0">
<input type="hidden" id="tx_sata_tag" name="tx_sata_tag" value="0">

<input type="hidden" name="flag" id="flag" value="0">
<input type="hidden" name="flagNum" id="flagNum" value="0">
<input type="hidden" name="flag_die" id="flag_die" value="1">
<input type="hidden" name="flag_die_flag" id="flag_die_flag" value="1">
<input type="hidden" name="title" id="title" value="${title}">


</div>
<script src="/app/js/mui.min.js"></script>
<script src="/app/js/mui.poppicker.js"></script>
<script src="/app/js/mui.picker.min.js"></script>
<script src="/app/js/yun_title.js"></script>
<script>
    //滚动条触发函数，滚动条用的是bootstrap插件
    var sliders = new Slider('#ex1', {
        formatter: function(value) {

            $("#guige_band_one").text(value);
            $('.brand_slider_num_one').text(value);
            $('.brand_slider_num_one').val(value);
            $("#ex1").attr("value",value);
            $('.brand_price').text("￥"+value*40);

            /*brand_price(value);
            getAllPrice();*!/*/
        }
    });

    var sliders2 = new Slider('#ex2', {
        formatter: function(value) {
            $("#guige_band_two").text(value);
            $('.brand_slider_num_two').text(value);
            $('.brand_slider_num_two').val(value);
            $("#ex2").attr("value",value);
            $('.brand_price').text("￥"+value*40);
        }
    });




    (function($, doc) {
        $.init();
        $.ready(function() {
            var guiGePicker = new $.PopPicker();
            guiGePicker.setData(
                    [{value:16000,text:'36C/321GB'},
                        {value:19200,text:'44C/380GB'}
                    ]
            );
            var showGuiGePickerButton = doc.getElementById('showGuiGePicker');
            var userResult = doc.getElementById('userResult');
            var guige_count_one=doc.getElementById('guige_count_one');
            var guiGe= doc.getElementById("guiGe");
            getOnePrice();
            var total_guige_one=doc.getElementById('total_guige_one');
            showGuiGePickerButton.addEventListener('tap', function(event) {
                guiGePicker.show(function(items) {
                    total_guige_one.value=items[0].value;
                    userResult.innerText = items[0].text;
                    guige_count_one.innerHTML=items[0].text;
                    if(items[0].text=="36C/321GB"){
                        guiGe.innerText="规格1";
                    }
                    else {
                        guiGe.innerText="规格2";
                    }
                    getOnePrice();
                });
            }, false);



            var guiGePicker2 = new $.PopPicker();
            guiGePicker2.setData(
                [
                    {value:16000,text:'36C/321GB'},
                    {value:19200,text:'44C/380GB'}
            ]);
            var showGuiGePickerButton2 = doc.getElementById('showGuiGePicker2');
            var userResult2 = doc.getElementById('userResult2');
            var guige_count_two=doc.getElementById('guige_count_two');
            var Guige2= doc.getElementById("Guige_T");
            var total_guige_two=doc.getElementById('total_guige_two');
            showGuiGePickerButton2.addEventListener('tap', function(event) {
                guiGePicker2.show(function(items) {
                    total_guige_two.value=items[0].value;
                    userResult2.innerText = items[0].text;
                    guige_count_two.innerHTML=items[0].text;
                    if(items[0].text=="36C/321GB"){
                        Guige2.innerText="规格1";
                    }
                    else {
                        Guige2.innerText="规格2";
                    }
                    getOnePrice();
                });
            }, false);



            var storagePicker_Left = new $.PopPicker();
            storagePicker_Left.setData(['SATA基础包','SAS基础包','SSD叠加包']);

            var storagePicker_Right = new $.PopPicker();
            storagePicker_Right.setData(['1000GB','500GB']);
            var showStoragePickerLeft = doc.getElementById('showstoragePickerLeft');
            var storageResultLeft = doc.getElementById('storageResultLeft');
            var guige_type_one_name=doc.getElementById('guige_type_one_name');
            showStoragePickerLeft.addEventListener('tap', function(event) {
                storagePicker_Left.show(function(items) {
                    storageResultLeft.innerText = items[0];
                    guige_type_one_name.innerHTML=items[0];
                    getOnePrice();
                });
            }, false);



            var showStoragePickerRight = doc.getElementById('showstoragePickerRight');
            var storageResultRight = doc.getElementById('storageResultRight');
            var guige_type_one_count=doc.getElementById('guige_type_one_count');
            showStoragePickerRight.addEventListener('tap', function(event) {
                storagePicker_Right.show(function(items) {
                    storageResultRight.innerText = items[0];
                    guige_type_one_count.innerHTML=items[0];
                    getOnePrice();
                });
            }, false);


            var storagePicker_Left_two = new $.PopPicker();
            storagePicker_Left_two.setData(['SATA基础包','SAS基础包','SSD叠加包']);

            var storagePicker_Right_two = new $.PopPicker();
            storagePicker_Right_two.setData([{value:35000,text:'57.2TB'},
                {value:8800,text:'14.3TB'}
            ]);
            getTwoPrice();
            var showStoragePickerLeft_two = doc.getElementById('showstoragePickerLeft_two');
            var storageResultLeft_two = doc.getElementById('storageResultLeft_two');
            var guige_type_two_name=doc.getElementById('guige_type_two_name');
            var storageResultRight_two = doc.getElementById('storageResultRight_two');
            var total_stat_two=doc.getElementById('total_stat_two');
            showStoragePickerLeft_two.addEventListener('tap', function(event) {
                storagePicker_Left_two.show(function(items) {


                    storageResultLeft_two.innerText = items[0];
                    guige_type_two_name.innerHTML=items[0];
                    if(items[0]=="SATA基础包"){
                        storagePicker_Right_two.setData([{value:35000,text:'57.2TB'},
                            {value:8800,text:'14.3TB'}
                        ]);
                        storageResultRight_two.innerText ="57.2TB";
                        total_stat_two.value=35000;
                    }
                    else if(items[0]=="SAS基础包"){
                        storagePicker_Right_two.setData(
                                [
                                    {value:44500,text:'规格1：36TB'},
                                    {value:66500,text:'规格2：5TB'},
                                    {value:11000,text:'规格1：:9TB'},
                                    {value:16500,text:'规格2：13.5TB'}
                                ]
                        );
                        storageResultRight_two.innerText ="规格1：36TB";
                        total_stat_two.value=44500;
                    }
                    else if(items[0]=="SSD叠加包"){
                        storagePicker_Right_two.setData(
                                [
                                    {value:45500,text:'规格1：14.8TB'},
                                    {value:56500,text:'规格2：18.4TB'},
                                    {value:11500,text:'规格1：3.7TB'},
                                    {value:14000,text:'规格2：4.6TB'}
                                ]
                        );
                        storageResultRight_two.innerText ="规格1：14.8TB";
                        total_stat_two.value=45500;

                    }
                    getTwoPrice();

                });


            }, false);



            var showStoragePickerRight_two = doc.getElementById('showstoragePickerRight_two');
            /*var storageResultRight_two = doc.getElementById('storageResultRight_two');*/
            var guige_type_two_count=doc.getElementById('guige_type_two_count');
            showStoragePickerRight_two.addEventListener('tap', function(event) {
                storagePicker_Right_two.show(function(items) {
                    storageResultRight_two.innerText = items[0].text;
                    guige_type_two_count.innerHTML= items[0].text;
                    total_stat_two.value = items[0].value;
                    getTwoPrice();
                });
            }, false);

        });
    })(mui, document);
    $('#list_brand_one').on("blur",'.stat_num',function (event) {
        var stat_num = parseInt($(this).val());
        var  guige_band_one=document.getElementById('guige_band_one');
        if(isNaN(stat_num)){
            stat_num=0;
            $('#statnumone').text(stat_num);
            guige_band_one.innerHTML=stat_num.toString();
            count_one(stat_num);
        }
        if(stat_num<=0||stat_num==""){
            $(this).val(0);
            $('#statnumone').text(stat_num);
            guige_band_one.innerHTML=stat_num.toString();
            //$('.stat_num')
            /*count();*/
            //计算滚动条
            count_one(stat_num);
            sliders.setValue(stat_num);
        }
        else if(stat_num>=300){
            $(this).val(300);
            $('#statnumone').text(stat_num);
            guige_band_one.innerHTML=stat_num.toString();
            count_one(stat_num);
            sliders.setValue(stat_num);
        }
        else {
            $(this).val(stat_num);
            $('#statnumone').text(stat_num);
            guige_band_one.innerHTML=stat_num.toString();
            sliders.setValue(stat_num);
            count_one(stat_num);
        }
    });
    $('#list_brand_one').on('click','.stat_plus',function (event) {
        console.dir(this);
        var numInput = $(this).prev();
        var num=parseInt(numInput.val());
        var guige_band_one=document.getElementById('guige_band_one');
        if(num>=300){
            numInput.val(300);
            $('#statnumone').text(num);
            guige_band_one.innerHTML=num.toString();
            count_one(num);
            sliders.setValue(num);
        }
        else {
            num=num+1;
            numInput.val(num);
            $('#statnumone').text(num);
            guige_band_one.innerHTML=num.toString();
            count_one(num);
            sliders.setValue(num);
        }
    });
    $('#list_brand_one').on('click','.stat_minus',function (event) {
        console.dir(this);
        var numInput = $(this).next();
        var num=parseInt(numInput.val());
        var guige_band_one=document.getElementById('guige_band_one');
        if(num<=0){
            numInput.val(0);
            $('#statnumone').text(num);
            count_one(num);
            guige_band_one.innerHTML=num.toString();
            sliders.setValue(num);
        }
        else {
            num=num-1;
            numInput.val(num);
            $('#statnumone').text(num);
            guige_band_one.innerHTML=num.toString();
            count_one(num);
            guige_band_one.text(num.toString());
            sliders.setValue(num);
        }
    });


    $('#list_brand_two').on("blur",'.stat_num',function (event) {
        var num = parseInt($(this).val());
        var  guige_band_two=document.getElementById('guige_band_two');
        if(isNaN(num)){
            num=0;
            $('#statnumtwo').text(num);
            guige_band_two.innerHTML=num.toString();
            count_two(num);
        }
        if(num<=0||num==""){
            $(this).val(0);
            //$('.stat_num')
            /*count();*/
            //计算滚动条
            $('#statnumtwo').text(num);
            guige_band_two.innerHTML=num.toString();
            count_two(num);
            sliders2.setValue(num);
        }
        else if(num>=300){
            $(this).val(300);
            /*count();*/
            //计算滚动条
            $('#statnumtwo').text(num);
            guige_band_two.innerHTML=num.toString();
            count_two(num);
            sliders2.setValue(num);
        }
        else {
            $(this).val(num);
            /*count();*/
            //计算滚动条
            $('#statnumtwo').text(num);
            guige_band_two.innerHTML=num.toString();
            count_two(num);
            sliders2.setValue(num);
        }
    });
    $('#list_brand_two').on('click','.stat_plus',function (event) {
        console.dir(this);
        var numInput = $(this).prev();
        var num=parseInt(numInput.val());
        var  guige_band_two=document.getElementById('guige_band_two');
        if(num>=300){
            numInput.val(300);
            /*count();*/
            //计算滚动条
            $('#statnumtwo').text(num);
            guige_band_two.innerHTML=num.toString();
            count_two(num);
            sliders2.setValue(num);
        }
        else {
            num=num+1;
            numInput.val(num);
            guige_band_two.innerHTML=num.toString();
            /*count();*/
            //计算滚动条
            $('#statnumtwo').text(num);
            count_two(num);
            sliders2.setValue(num);
        }
    });
    $('#list_brand_two').on('click','.stat_minus',function (event) {
        console.dir(this);
        var numInput = $(this).next();
        var num=parseInt(numInput.val());
        var  guige_band_two=document.getElementById('guige_band_two');
        if(num<=0){
            numInput.val(0);
            /*count();*///计算滚动条
            $('#statnumtwo').text(num);
            guige_band_two.innerHTML=num.toString();
            count_two(num);
            sliders2.setValue(num);
        }
        else {
            num=num-1;
            numInput.val(num);
            guige_band_two.innerHTML=num.toString();
            /*count();*/
            //计算滚动条
            $('#statnumtwo').text(num);
            count_two(num);
            sliders2.setValue(num);
        }
    });






    function  count_one(num) {
        var total_brand_d=document.getElementById('total_brand_d');
        total_brand_d.value=num*40;
        getOnePrice();

    };
    function  count_two(num) {
        var total_brand_a=document.getElementById('total_brand_a');
        total_brand_a.value=num*40;
        getTwoPrice();

    };


    function  getOnePrice() {
        var totalPrice=0;
        var total_guige_one=document.getElementById('total_guige_one');
        var price=parseFloat(total_guige_one.value);
        var total_brand_d=document.getElementById('total_brand_d');
        var onePrice=parseFloat(total_brand_d.value);
        var guige_type_one_name=document.getElementById('guige_type_one_name').innerHTML;
        var guige_type_one_count=document.getElementById('guige_type_one_count').innerHTML;

        var total_stat_one=document.getElementById('total_stat_one');
        if(guige_type_one_name=="SATA基础包"&&guige_type_one_count=="1000GB"){
            total_stat_one.value=300;
        }
        if(guige_type_one_name=="SATA基础包"&&guige_type_one_count=="500GB"){
            total_stat_one.value=150;
        }
        if(guige_type_one_name=="SAS基础包"&&guige_type_one_count=="500GB"){
            total_stat_one.value=300;
        }
        if(guige_type_one_name=="SAS基础包"&&guige_type_one_count=="1000GB"){
            total_stat_one.value=600;
        }if(guige_type_one_name=="SSD基础包"&&guige_type_one_count=="500GB"){
            total_stat_one.value=600;
        }if(guige_type_one_name=="SSD基础包"&&guige_type_one_count=="1000GB"){
            total_stat_one.value=1200;
        }
        var total_stat_one=parseFloat(total_stat_one.value);



        totalPrice=price+onePrice+total_stat_one;
        $("#cpu_price").text(totalPrice.toFixed(2));
        getAllPrice();
    }
    function  getTwoPrice() {

        var totalPrice=0;
        var total_guige_two=document.getElementById('total_guige_two');
        var price=parseFloat(total_guige_two.value);
        var total_stat_two=document.getElementById('total_stat_two');
        var onePrice=parseFloat(total_stat_two.value);
        var total_brand_a=document.getElementById('total_brand_a');
        var brandprice=parseFloat(total_brand_a.value);
        totalPrice=price+onePrice+brandprice;
        $("#cpu_price_two").text(totalPrice.toFixed(2));
        getAllPrice();
    }
    function getAllPrice() {
        var cpu_price=document.getElementById('cpu_price');
        var dianxinone=parseFloat(cpu_price.innerHTML);
        var cpu_price_two=document.getElementById('cpu_price_two');
        var dianxintwo=parseFloat(cpu_price_two.innerHTML);


        var userResult2=document.getElementById('userResult2').innerHTML;
        var storageResultRight_two=document.getElementById('storageResultRight_two').innerHTML;

        if(userResult2=="36C/321GB"&&storageResultRight_two=="14.3TB"){
        $('#tx_price').text('￥9600.00');
        }
        else  if(userResult2=="44C/380GB"&&storageResultRight_two=="规格2：4.6TB"){
            $('#tx_price').text('￥22656.00');
        }
        else {
            $('#tx_price').text('无此规格');
        }
        $("#ali_price").text("无此规格");
        $("#allprice").text("￥"+(dianxinone+dianxintwo).toFixed(2));

    }

    $('.checkInfo_right').click(function () {
        var openId=$('#openId').val();
        //VCPU
        var vCPUone=$('#userResult').text();
        var vCPUtwo=$('#userResult2').text();
        var memoryResultOne=$('#storageResultLeft').text();
        var memoryResultTwo=$('#storageResultLeft_two').text();
        var userResult=vCPUone+memoryResultOne;

        var memoryResult=vCPUtwo+memoryResultTwo;
        /*memoryResultOne+memoryResultTwo;*/

        var tatil_stat=$('#guige_band_one').text();
        var db_band_two=$('#guige_band_two').text();
        var shebei= parseFloat(tatil_stat)+parseFloat(db_band_two)+"  M";


        //三个价格
        var aliprice=$('#ali_price').text();
        var txprice=$('#tx_price').text();
        var allprice=$('#allprice').text();
        /*if(openId==null){
            alert("添加失败,请重新打开应用");
            return false;
        }*/
        if(aliprice=="无此规格"){
            aliprice=0;
        }
        else {
            aliprice=aliprice.substring(1);
        }
        if(txprice=="无此规格"){
            txprice=0;
        }
        else {
            txprice=txprice.substring(1);
        }
        allprice=allprice.substring(1);

        var data1 = {
            cpuAndMem:userResult,
            meMory:'',
            stat:memoryResult,
            brandNum:shebei,
            ali_price:aliprice,
            tx_price:txprice,
            all_price:allprice,
            productTypeId:3,
            productName:'专属云',
            oneKey:'计算独享',
            twoKey:'存储独享',
            threeKey:'带宽',
            oneImage:'yunzhuji-one',
            twoImage:'yunzhuji-two',
            threeImage:'yunzhuji-three'
        }
        $.post("/takeList/"+openId+"/",data1,function(data){
            if(data.type=="success"){
                layer.msg(data.msg);
            }
        });
    });


</script>


</body>

</html>
